<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>渠道二维码</title>
	
	<link rel="stylesheet" href="/layui/css/layui.css">
	<link rel="stylesheet" href="/hyqcss/public.css">
	<script src="/cdn/echarts.min.js"></script>
	<style type="text/css">
		body{
			background: #e9e9e9;
		}
		/*公共头部带搜索*/
		.public_container{
			margin: 20px;
			background: #fff;
		}
		.public_title_container{ 
			height: 54px;
			padding: 0 20px;
			font-size: 14px;
			display: flex;
			align-items: center;
			background: #f9f9f9;
			border-bottom: 1px solid #f0f0f0;
		}
		.public_title_container p{
			margin-right: 30px;
			height: 54px;
			line-height: 54px;
			cursor: pointer;
		}
		.public_title_container a{
			margin-right: 30px;
			height: 54px;
			line-height: 54px;
			cursor: pointer;
		}
		.public_title_active{
			color: #1E9FFF;
			border-bottom: 1px solid #1E9FFF;
		}
		.public_buttonSearch_container{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px;
			background: #fff;
		}
		.public_buttonSearch_container a{
			color: #fff;
			background-color: #1E9FFF;
			text-shadow: 0 -1px 0 rgba(0,0,0,.12);
			height: 24px;
			padding: 4px 15px;
			font-size: 14px;
			border-radius: 2px;
			display: flex;
			align-items: center;
		}
		.public_Search_container{
			position: relative;
		}
		.public_Search_container input{
			width: 240px;
			height: 32px;
			border: 1px solid #d9d9d9;
		}
		.public_Search_container i{
			position: absolute;
			bottom: 6px;
			right: 10px;
			cursor: pointer;
		}
		
		/*统计页面*/
		.public_statisticsHeader_content{
			padding: 20px 20px 0 20px;
		}
		.public_statisticsHeader_contaienr{
			/*margin-bottom: 20px;*/
			display: flex;
			justify-content: space-between;
			padding: 13px 20px;
			border: 1px solid #e0e0e0;
			background: #f9f9f9;
		}
		.qrcode_statistics_content{
			display: flex;
			border-bottom: 1px solid #e0e0e0;
    		border-left: 1px solid #e0e0e0;
    		border-right: 1px solid #e0e0e0;
    		margin: 0 20px;
		}
		.qrcode_statisticsEcharts_container{
			flex: 3;
			padding: 20px 0 10px 0;
			border-right: 1px solid #e0e0e0;
		}
		.qrcode_statisticsOther_container{
			flex: 1;
			padding: 20px 20px 10px 20px;
		}
		.qrcode_statisticsOther_container{

		}
		.qrcode_statisticsOther_container h3{
			color: #333;
			font-size: 14px;
			font-weight: bold;
			margin-bottom: 15px;
		}
		.qrcode_statisticsOther_container h5{
			color: #8c8c8c;
			font-size: 14px;
			text-align: center;
		}
		.qrcode_statisticsOther_List{

		}
		.qrcode_statisticsOther_List li{
			border-top: 1px dashed #e0e0e0;
			border-bottom: 1px dashed #e0e0e0;
			border-right: 1px dashed #e0e0e0;
			border-left: 2px solid #5b8ff9;
			height: 46px;
			padding: 0 15px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 8px;
		}
		.qrcode_statisticsOther_List li span{
			font-size: 14px;
			color: #595959;
		}
		.qrcode_statisticsOther_List li b{
			font-size: 14px;
			color: #f5222d;
		}
		.addChannels{
			border-left: 1px dashed #e0e0e0 !important;
			cursor: pointer;
			justify-content: center !important;
			color: #595959;
			font-size: 14px;
		}
	</style>
	<style type="text/css">
		.slide-btn{
			width:100px;
			display:inline-block;
			border:1px solid;
			border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
			border-radius:5px;
			position: relative;
			overflow: hidden;
			cursor: pointer;
		}
		.slide-btn .inner-on,.slide-btn .inner-off{
			width:151px;
			box-sizing:border-box;
			display: inline-block;
			position: relative;
			left:0;
			cursor: pointer;
			transition:left 0.5s;
		}
		.inner-on .left,.inner-off .left{
			width: 50px;
			color: #fff;
			text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
			background:#58b058;
			text-align:center;
			display: inline-block;
			padding: 4px 0;
		}
		.inner-on .space,.inner-off .space{
			width: 51px;
			display: inline-block;
			box-sizing:border-box;
			padding: 4px 0;
			color: #fff;
			background-color: #f5f5f5;
			border-left: 1px solid #cccccc;
			border-right: 1px solid #cccccc;
			text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
			background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
			border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
		}
		.inner-on .right,.inner-off .right{
			width: 50px;
			color: #fff;
			text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
			background:#f9a123;
			text-align:center;
			display: inline-block;
			padding: 4px 0;
		}
		.customSwitch .layui-form-switch{
		  margin-top: 0 !important;
		}
		.layui-table tr{
		  height: 48px;
		}
	</style>
</head>
<body>
		<!-- 顶部提示框 开始 -->
	<div class="public_tipSetting_contaienr">
		<div class="public_tipSetting_content">
			<p>渠道活码功能是非常实用的功能，可以实现同一个二维码，扫码后添加不同的客服（销售）人员。如果同时在企业微信官方后台配置了欢迎语，本处配置的欢迎语不生效。</p>
			<a href="https://support.qq.com/products/174823/faqs/71345" target="_blank">查看教程</a>
			<svg t="1599462804099" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8813" width="15" height="15"><path d="M512 102.4a409.6 409.6 0 1 0 409.6 409.6 409.6 409.6 0 0 0-409.6-409.6z m181.248 518.144a51.2 51.2 0 0 1-72.704 72.704L512 584.192l-108.544 109.056a51.2 51.2 0 0 1-72.704-72.704L439.808 512 330.752 403.456a51.2 51.2 0 0 1 72.704-72.704L512 439.808l108.544-109.056a51.2 51.2 0 0 1 72.704 72.704L584.192 512z" fill="" p-id="8814"></path></svg>
		</div>
	</div>
	<!-- 顶部提示框 结束 -->
	<div class="public_container">
		<!-- /*公共头部带搜索*/ --> 
		<div class="public_content">
			<div class="public_title_container">
				<!-- <p id="qrcode_title">渠道二维码</p>
				<p class="public_title_active" id="qrcode_title">渠道二维码</p>
				<p id="statistics_title">数据统计</p> -->
				<a href="contact_way.html" class="public_title_active">渠道二维码</a>
				<a href="contact_way_statistics.html">数据统计</a>
			</div>
			
		</div>
		<div class="qrcode_table_container" style="display: block;">
			<div class="public_buttonSearch_container">
				<a href="add_contact_way.html">+ 新建活码</a>
				<form  method="get" action="" id="Form1">
				<div class="public_Search_container">
					<input type="text" name="name" value="{$name}" required  lay-verify="required" placeholder="请输入渠道名称进行搜索" autocomplete="off" class="layui-input">
					<i class="layui-icon layui-icon-search" onclick="document.getElementById('Form1').submit()"></i>
				</div>
				</form>
			</div>
			<!-- /*公共头部带搜索*/ end -->
			<!-- 公共表格部分 -->
			<div class="public_table_container layui-form">
				
				<table class="layui-table" lay-skin="line">
				  <colgroup>
				      <col width="200">
				      <col width="100">
				      <col>
				    </colgroup>
				    <thead>
				      <tr>
				        <th>渠道名称</th>
				        <th>使用模式</th>
				        <th>使用人员</th>
				        <th>备注</th>
				        <th>创建时间</th>
				        <th>欢迎语状态</th>
				        <th>操作</th>
				      </tr> 
				    </thead>
				    <tbody>
				      {loop $res as $r}
					  <tr>
						<td>{$r['name']}</td>
						<!-- <td>{$r['name']}<img src="{$r['merge_qr_code']?$r['merge_qr_code']:$r['qr_code']}" style="width:30px;height:30px" /></td> -->
						<td>
						{if count($r['users']) == 1}
						单人
						{else}
						多人
						{/if}
						</td>
						<td>
						{loop $r['users'] as $user}
							{$h->get_user_by_id($r['wid'],$user)['name']}&nbsp;
						{/loop}
						</td>
						<td>{$r['bz']}</td>
						<td>{$r['ctime']}</td>
						<td>
							<div class="customSwitch">
							  <input type="checkbox" lay-filter="switch1" lay-skin="switch" data-id="{$r['id']}" {if $r['hyy_status'] == 1}checked{/if}>
							</div>
							<!-- <div class="slide-btn">
								<div data-id="{$r['id']}"  {if $r['hyy_status'] == 1} style="left :-51px;"class="inner-off inner"{else} class="inner-on inner" {/if}>
									<span class="left">已关闭</span><span class="space">&nbsp;</span><span class="right">已开启</span>
								</div>
							</div> -->
						</td>
						<td>
						<a class="table-public-btn" href="edit_contact_way-{$r['id']}.html">编辑</a>
						<a class="table-public-btn" target="_blank" href="download_qrcode-{$r['id']}.html">下载</a>
						<a class="table-public-btn" onclick="del_contact_way({$r['id']})">删除</a>
						</td>
					  </tr>
					{/loop}
				    </tbody>
				</table>
			</div> 
			<!-- 公共表格部分 end-->
			<div class="main-container-h pageing-container-h">
          <div class="pageing-content-h">
               <span>{$p->totalnum}条/{$p->totalpage}页</span>
          </div>
          <ul class="pageing-content-h">{P weidogsadmin}</ul>
          </div>
		</div>
		<div class="qrcode_statistics_container" style="display: none;">
			<div class="public_statisticsHeader_content">
				<div class="public_statisticsHeader_contaienr">
					<div class="public_statisticsHeaderLeft_contaienr">
						<div class="layui-inline">
							<button type="button" class="layui-btn layui-btn-primary" onclick="one_week()">近1周</button>
						</div>
						<div class="layui-inline">
							<button type="button" class="layui-btn layui-btn-primary" onclick="two_week()">近2周</button>
						</div>
						<div class="layui-inline">
							<button type="button" class="layui-btn layui-btn-primary" onclick="one_month()">近1月</button>
						</div>
						<div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
							<input type="text" class="layui-btn layui-btn-primary" id="test1" value="{$startDate}" placeholder="请选择开始日期">
						</div>
						<div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
							<input type="text" class="layui-btn layui-btn-primary" id="test2" value="{$endDate}" placeholder="请选择结束日期">
						</div>
					</div>
					<div class="public_statisticsHeaderRight_contaienr">
						
					</div>
				</div>
			</div>
			<div class="qrcode_statistics_content">
				<div class="qrcode_statisticsEcharts_container">
					<div id="main" style="width: 100%;height:400px;"></div>
				</div>
				<div class="qrcode_statisticsOther_container">
					<h3>近一周各渠道新增客户数</h3>
					<ul class="qrcode_statisticsOther_List">
						<li>
							<span>二维码</span>
							<b>{$week_add_num}</b>
						</li>
						<!--<li class="addChannels">+ 选择渠道进行分析</li>-->
					</ul>
					<!--<h5>最多可同时分析8个渠道</h5>-->
				</div>
			</div>
		</div>
		
	</div>
	
	<script src="/cdn/jquery.js"></script>
	<script src="/layui/layui.js"></script>
	<script src="/js/ajax.js"></script>
	<script type="text/javascript">
		$(".inner").on("click",function(){
			if($(this).prop("className") == "inner-on inner"){
				var id = $(this).data("id");
				myAjaxPost(false, true, 'update_status_kan.html', { id:id}, function (resp) {
					if(resp.status == "success"){
						tusi(resp.msg);
					}else{
						tusi(resp.msg);
					}
				})
				$(this).attr("style", "left:-51px");
				$(this).attr("class", "inner-off inner");
			}else{
				var id = $(this).data("id");
				myAjaxPost(false, true, 'update_status_guan.html', { id:id}, function (resp) {
					if(resp.status == "success"){
						tusi(resp.msg);
					}else{
						tusi(resp.msg);
					}
				})
				$(this).attr("style", "left:0px");
				$(this).attr("class", "inner-on inner");
			}
		})
	</script>
	<script>
  layui.use('form', function(){
    var form = layui.form;
    form.on('switch(switch1)', function(data){
      var id = $(this).data("id");
      if(data.elem.checked == true){
        myAjaxPost(false, true, 'update_status_kan.html', { id:id}, function (resp) {
          if(resp.status == "success"){
            tusi(resp.msg);
          }else{
            tusi(resp.msg);
          }
        })
      }else{
        myAjaxPost(false, true, 'update_status_guan.html', { id:id}, function (resp) {
          if(resp.status == "success"){
            tusi(resp.msg);
          }else{
            tusi(resp.msg);
          }
        })
      }
    }); 
    //各种基于事件的操作，下面会有进一步介绍
  });
  </script>
	<script>
		function del_contact_way(id){
			if(confirm('确定删除吗？')){
				myAjaxPost(false, true, 'del_contact_way.html', { id:id}, function (resp) {
						if (resp.status == 'success') {
							tusi(resp.msg);
							setTimeout(function(){
								location.href = 'contact_way.html';
							},500);
						}else{
							alert(resp.msg);
						}
					});
			}
		}
		$('.public_tipSetting_contaienr svg').click(function(){
			$('.public_tipSetting_contaienr').hide();
		})
	</script>
	<script type="text/javascript">
		layui.use('form', function(){
		  var form = layui.form;
		  
		  //监听提交
		  form.on('submit(formDemo)', function(data){
		    layer.msg(JSON.stringify(data.field));
		    return false;
		  });
		});
		// 日期
		layui.use('laydate', function(){
			var laydate = layui.laydate;

			//执行一个laydate实例
			laydate.render({
				elem: '#test1' //指定元素
				,type: 'date'
				,max: -1 //最大1天前
				,showBottom: false
				,done: function(value, date, endDate){
					//console.log(value); //得到日期生成的值，如：2017-08-18
					//window.location.href='contact_way.html?dates='+value;
					var endDate = $('#test2').val();
					myAjaxPost(false, true, 'get_contact_way_statistics.html', { startDate:value,endDate:endDate}, function (resp) {
						if (resp.status == 'success') {
							//$('#test1').val(resp.data.startDate);
							var option = myChart.getOption();
							option.xAxis[0].data = resp.data.statistics_date;
							option.series[0].data = resp.data.statistics_data;
							myChart.setOption(option);
						}else{
							alert(resp.msg);
						}
					});
				 }
			});
			//执行一个laydate实例
			laydate.render({
				elem: '#test2' //指定元素
				,type: 'date'
				,min: -30
				,max: -1 //最大1天前
				,showBottom: false
				,done: function(value, date, endDate){
					//console.log(value); //得到日期生成的值，如：2017-08-18
					//window.location.href='contact_way.html?dates='+value;
					var startDate = $('#test1').val();
					myAjaxPost(false, true, 'get_contact_way_statistics.html', { endDate:value,startDate:startDate}, function (resp) {
						if (resp.status == 'success') {
							//$('#test2').val(resp.data.endDate);
							var option = myChart.getOption();
							option.xAxis[0].data = resp.data.statistics_date;
							option.series[0].data = resp.data.statistics_data;
							myChart.setOption(option);
						}else{
							alert(resp.msg);
						}
					});
				 }
			});
			// 弹窗
			layui.use('layer', function(){
			  var layer = layui.layer;
			}); 
		});
	</script>
	<script>
	function one_week(){
		myAjaxPost(false, true, 'get_contact_way_statistics.html', { type:'one_week'}, function (resp) {
			if (resp.status == 'success') {
				$('#test1').val(resp.data.startDate);
				$('#test2').val(resp.data.endDate);
				var option = myChart.getOption();
				option.xAxis[0].data = resp.data.statistics_date;
				option.series[0].data = resp.data.statistics_data;
				myChart.setOption(option);
			}else{
				alert(resp.msg);
			}
		});		
	}
	function two_week(){
		myAjaxPost(false, true, 'get_contact_way_statistics.html', { type:'two_week'}, function (resp) {
			if (resp.status == 'success') {
				$('#test1').val(resp.data.startDate);
				$('#test2').val(resp.data.endDate);
				var option = myChart.getOption();
				option.xAxis[0].data = resp.data.statistics_date;
				option.series[0].data = resp.data.statistics_data;
				myChart.setOption(option);
			}else{
				alert(resp.msg);
			}
		});
	}
	function one_month(){
		myAjaxPost(false, true, 'get_contact_way_statistics.html', { type:'one_month'}, function (resp) {
			if (resp.status == 'success') {
				$('#test1').val(resp.data.startDate);
				$('#test2').val(resp.data.endDate);
				var option = myChart.getOption();
				option.xAxis[0].data = resp.data.statistics_date;
				option.series[0].data = resp.data.statistics_data;
				myChart.setOption(option);
			}else{
				alert(resp.msg);
			}
		});
	}
	</script>
	<script type="text/javascript">
		$('#qrcode_title').on("click",function(){
			$('.public_title_container p').removeClass('public_title_active');
			$(this).addClass('public_title_active');
			$('.qrcode_statistics_container').hide();
			$('.qrcode_table_container').show();
		})
		$('#statistics_title').on("click",function(){
			$('.public_title_container p').removeClass('public_title_active');
			$(this).addClass('public_title_active');
			$('.qrcode_table_container').hide();
			$('.qrcode_statistics_container').show();
			myChart.resize();
		})
		// 选择渠道进行分析
		$('.addChannels').on("click",function(){
			layer.open({
			  type: 2,
			  title: '请选择标签',
			  shadeClose: true,
			  shade: 0.2,
			  area: ['700px', '400px'],
			  content: 'check.html'
			}); 
		})
	</script>
	<!-- 图表 -->
	<script type="text/javascript">
		var myChart = echarts.init(document.getElementById('main'));
		// 指定图表的配置项和数据
		option = {
		    title: {
		    	text:"新客户走势图",
		    	padding: [5,0,0,30],
		    	textStyle:{ //设置主标题风格
		    	Color:'green',//设置主标题字体颜色
		    	fontStyle:'',//主标题文字风格
		    	fontSize:14,
		    	},
		    },
		    tooltip: {
		        trigger: 'axis'
		    },
		    color:["#5b8ff9","#88e3bf","#5d7092"],
		    legend: {
		        data:['新增客户数']
		    },
		    grid: {
		        left: '2%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        data: {$statistics_date}
		    },
		    yAxis: {
		        type: 'value'
		    },
		    series: [
		        {
		            name:'新增客户数',
		            type:'line',
		            stack: '总量',
		            data:{$statistics_data},
		            smooth: true,
		        }
		       
		    ]
		};
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);

		// 自适应
		window.addEventListener("resize",function (){
			myChart.resize();
		});

    </script>
</body>
</html>